<template>
  <div class="tableWrapper">
    <el-table
      ref="table"
      :border="border"
      :height="height"     
      :header-cell-style="rowClass"
      v-loading="loading"
      element-loading-text="Loading"
      :data="isPager ? tableData : tableData.slice((tablecurrent-1)*tablesize,tablecurrent*tablesize)"
      highlight-current-row
      tooltip-effect="dark"
      style="width:100%"
      @sort-change="handleSortChange"
      @selection-change="handleSelectionChange">
        <el-table-column v-if="isShow" width="100" align="center" :label="rank ? '排名' : '编号'">
          <template slot-scope="scope">
            <template v-if="rank">
              <el-tag v-if="scope.$index=== 0 && tablecurrent === 1" type="danger" size="medium" >
              TOP{{ scope.$index + 1 }}
              </el-tag>
              <el-tag v-else-if="scope.$index=== 1 && tablecurrent === 1" type="warning" size="medium" >
              TOP{{ scope.$index + 1 }}
              </el-tag>
              <el-tag v-else-if="scope.$index=== 2 && tablecurrent === 1" type="primary" size="medium" >
              TOP{{ scope.$index + 1 }}
              </el-tag>
              <span v-else> {{scope.$index + 1 + tablesize*(tablecurrent - 1)}} </span>
            </template>
            <template v-else>
              <span> {{scope.$index + 1 + tablesize*(tablecurrent - 1)}} </span>
            </template>
          </template>
        </el-table-column>
        <el-table-column v-for="(item,index) in tableLabel" :width="item.width ? item.width : ''" :key="index" :align="item.align" :label="item.label" :prop="item.param" :sortable="item.sortable ? 'custom' : false">
          <template slot-scope="scope">

            <span v-if="item.render">
              {{item.render(scope.row)}}
            </span>
            
            <span v-else>{{scope.row[item.param]}}</span>
          </template>
        </el-table-column>
    </el-table>
    <el-pagination class="marT"
        v-show="tabletotal > 10"
        :page-size="tablesize" 
        background                                    
        @size-change="tableSizeChange"
        @current-change="tableCurrentImportDeptChange"
        :current-page="tablecurrent"                               
        :layout="layout"
        style="text-align: center"
        :total="tabletotal">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    props: {
      height: [Number, String],
      layout: {
        type: String,
        default: 'prev, pager, next'
      },
      sortable: {
        type: [String, Boolean],
        default: false
      },
      isShow: {
        type: Boolean,
        default: true
      },
      border: {
        type: Boolean,
        default: false
      },
      isPager: {
        type: Boolean,
        default: false
      },
      rank: {
        type: Boolean,
        default: false
      },
      tablesize: {
        type: Number,
        default: 10
      },
      tablecurrent: {
        type: Number,
        default: 1
      },
      tabletotal: {
        type: Number,
        default: 0
      },
      loading: {
        type: Boolean,
        default: false
      },
      tableData: {
        type: Array,
        default: () => {
          return []
        }
      },
      tableLabel: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    methods: {
      rowClass({row, rowIndex}) {
        if(this.rank) {
          return ''
        } else {
          return 'background: #eef1f6'
        }
      },
      handleSortChange(val){  // 排序
        this.$emit('handleSortChange',val)
      },
      handleSelectionChange(val){
        this.$emit('handleSelectionChange',val)
      },
      tableSizeChange(val) {
        this.$emit('tableSizeChange',val)
      },
      tableCurrentImportDeptChange(val) {
        this.$emit('tableCurrentImportDeptChange',val)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/common/common.scss';
    
    .border{
        box-sizing: content-box;
        height: 0;
        overflow: visible;
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0,0,0,.1);
    }
    .primary{
        color: #409EFF;
        font-size: 30px;
        margin-top: 20px;
        margin-bottom: 10px;
        font-weight: 400;
    }
    .bgColor{
        background: #fff;
    }
    .pad{
        padding: 0 20px;
        padding-top: 20px;
    }
    .marT{
        margin-top: 20px;
    }
    .mar{
        margin: 0 20px;
        margin-top: 20px;
    }
    .table{
        padding-bottom: 10px;
    }
    .background{
      background: #eef1f6;
    }
</style>